<html>
<head>
    <meta charset="utf-8">
    <title>藏品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="__INDEX__/css/mui.min.css">
    <link rel="stylesheet" href="__INDEX__/css/app.css">
    <script src="__INDEX__/index/js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="__INDEX__/index/css/swiper-4.3.5.min.css">
    <script type="text/javascript" src="__INDEX__/index/js/swiper-4.3.5.min.js"></script>
    <!--App自定义的css-->
    <style type="text/css">
        body {
            background-color: #F4F5F7;
        }

        .img-responsive {
            display: inline-block;
            height: auto;
            max-width: 100%;
        }

        .mr2-wsf {
            margin-right: 4;
        }

        .el-wsf {
            float: right;
            width: 48%;
            margin-left: 1px;
        }

        .el-wsf2 {
            width: 48%;
            margin-left: 1px;
        }

        .colort {
            color: #920707;
        }

        .pad8 {
            padding-top: 8px;
        }

        .zs-wsf {
            background: #303030;
            color: #fff;
            padding: 3.5px 9px;
            border-radius: 22px;
            opacity: 0.7;
        }

        .cp-title {
            line-height: 36px;
            color: #333;
            font-size: 15px;
            position: relative;
            top: 5px;
        }

        #pad {
            padding: 0px;
        }

        .mg10 {
            margin-left: 10px;
        }

        #pd4 {
            padding: 4px 0;
        }

        #see-wsf {
            z-index: 2;
            position: absolute;
            margin-top: -179px;
            margin-left: -2px;
        }

        .user_name-wsf {
            line-height: 36px;
            color: #333;
            font-size: 12px;
            padding-left: 5px;
        }

        .triangle_border_down {
            width: 0;
            height: 0;
            border-width: 13px 13px 0;
            border-style: solid;
            border-color: #C39772 transparent transparent;
            margin-left: 32px;
            position: relative;
        }

        .turecl-wsf {
            background: #C39772;
        }

        .mg0-wsf {
            margin-bottom: 0px;
        }

        .ftwt-wsf {
            font-weight: 700;
        }

        .wt {
            color: #FFFFFF;
        }

        .mui-preview-image.mui-fullscreen {
            position: fixed;
            z-index: 20;
            background-color: #000;
        }

        .mui-preview-header, .mui-preview-footer {
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 10;
        }

        .mui-preview-header {
            height: 44px;
            top: 0;
        }

        .mui-preview-footer {
            height: 50px;
            bottom: 0px;
        }

        .mui-preview-header .mui-preview-indicator {
            display: block;
            line-height: 25px;
            color: #fff;
            text-align: center;
            margin: 15px auto 4;
            width: 70px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 12px;
            font-size: 16px;
        }

        .mui-preview-image {
            display: none;
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .mui-preview-image.mui-preview-in {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }

        .mui-preview-image.mui-preview-out {
            background: none;
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
        }

        .mui-preview-image.mui-preview-out .mui-preview-header, .mui-preview-image.mui-preview-out .mui-preview-footer {
            display: none;
        }

        .mui-zoom-scroller {
            position: absolute;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            -webkit-backface-visibility: hidden;
        }

        .mui-zoom {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .mui-slider .mui-slider-group .mui-slider-item img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }

        .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
            width: 100%;
        }

        .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
            display: inline-table;
        }

        .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
            display: table-cell;
            vertical-align: middle;
        }

        .mui-preview-loading {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }

        .mui-preview-loading.mui-active {
            display: block;
        }

        .mui-preview-loading .mui-spinner-white {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            height: 50px;
            width: 50px;
        }

        .mui-preview-image img.mui-transitioning {
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
            transition: transform 0.5s ease, opacity 0.5s ease;
        }

        @-webkit-keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @-webkit-keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        p img {
            max-width: 100%;
            height: auto;
        }

        .user_name {
            line-height: 36px;
            color: #333;
            font-size: 14px;
            padding-left: 5px;
        }

        .user_img {
            width: 36px;
            height: 36px;
            border-radius: 100%;
        }

        button {
            float: right;
            font-size: 12px;
            padding: 3px 6px;
            position: relative;
            top: 7px;
            color: #f60;
            border: 1px #f60 solid;
        }

        .mui-btn-outlined {
            line-height: 0px;
            margin-left: 10px;
        }

        .to4 {
            position: relative;
            top: -4px;
        }

        .line-heightwsf {
            line-height: 35px;
            color: #C39772;
        }

        .hl-wsf {
            position: absolute;
            top: 224px;
            margin-left: 10px;
        }

        .bd-wsf {
            float: right;
            width: 50%;
        }

        #pad0 {
            padding: 5px 4px;
        }

        #wd20 {
            padding: 0px 4px;
            width: 20%;
        }

        .wt-wsf2 {
            color: #ffffff;
            font-size: 12px;
            position: relative;
            top: -2px;
        }

        .wt-wsf {
            color: #ffffff;
            font-size: 16px;
        }

        .mui-col-wsf-25 {
            width: 25%;
        }

        .back-wsf {
            background-color: #303030;
        }

        .volume-wsf {
            position: absolute;
            top: 22px;
            margin-left: 4px;
        }

        .mg24 {
            margin-left: 24px;
        }

        .time2-wsf {
            background: #920707;
            color: #FFFFFF;
            border-radius: 2px;
            padding: 2px;
        }

        .cl {
            color: #C39772
        }

        .top3 {
            position: relative;
            top: 3px;
        }

        .op-wsf {
            line-height: 30px;
            position: relative;
            bottom: 40px;
            left: 0;
            width: 100%;
            height: 30px;
            margin: 0;
            font-size: 15px;
            text-align: left;
            text-indent: 12px; /*opacity: .6;*/
            color: #ffffff; /*background-color: #000;*/
        }
        .cyz{
            background: #C39772;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
            float: right;
            margin-top: 4px;
            line-height: 20px;
        }
    </style>
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper" style="height: 200px;">
        {php}
        $imgs = explode(',',$good['goods_imgs']);
        {/php}
        {foreach $imgs as $img}
        <img class="swiper-slide" src="{$filePath}/{$img}">
        {/foreach}
    </div>
    <div class="swiper-pagination" style="width: 20%;"></div>
</div>
<div class="mui-table-cell mui-col-xs-12 mui-text-right" id="see-wsf">
				<span class="mui-h5">
					<span class="zs-wsf"><img src="__INDEX__/images/zan2.png" class="top3" width="19px"
                                              height="17px"/>&nbsp;<span>{$good->goods_fav}</span>&nbsp;</span>
					<span class="zs-wsf"><img src="__INDEX__/images/see2.png" class="top3" width="19px"
                                              height="17px"/>&nbsp;<span>{$good->goods_collect}</span></span>
				</span>
</div>
<div class="mui-content" style="background-color: #FFFFFF;padding-top: 0px;">
    <div class="mui-content-padded">
        <p class="op-wsf"></p>
        <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" style="margin-top: -40px;">
            <li class="mui-table-view-cell" id="pad0">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <p class="cp-title">{$good->goods_name}</p>
                        <span class="mui-h6">{$good->goods_desc}</span>
                        <h5 id="color30" style="font-size:18px ;">￥&nbsp;{$good->goods_min_price}~{$good->goods_max_price}</h5>
                        <div class="ht2"></div>
                        <p class="mui-h6 mui-ellipsis pad8 colort">距离结束:
                            <span id="{$good->goods_id}" class="settime"
                                  endTime="{:date('Y-m-d H:i:s',$good->expriy_time)}"></span>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="ht1"></div>

    {foreach $joiners as $joiner}

    <div class="mui-card-header mui-card-media"><img class="user_img" src="{$joiner->buyer->user_face_img}">
        <span class="user_name-wsf">
             {$joiner->buyer->user_name}
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>价格: {$joiner->join_price}</span>
            <span class="cyz" onclick="chooseHer({$joiner->join_id})">选择他</span>
        </span>
    </div>
    {/foreach}

    <div class="ht1"></div>

</div>

<div class="mui-card" style="margin:auto;bottom: 0px;position: fixed; width: 100%;">
    <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4" id="wd20" onclick="window.location.href='{:url('/')}'">
            <a href="#">
                <span  ><img src="__INDEX__/images/sy@2x.png" width="20px" height="20px"/></span>
                <div class="mui-media-body" style="margin-top:6px;">首页</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4" id="wd20" onclick="window.location.href='{:url('/iTypes')}'">
            <a href="#"   >
                <span  ><img src="__INDEX__/images/fl@2x.png" width="20px" height="20px"/></span>
                <div class="mui-media-body" style="margin-top:6px;">分类</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4" id="wd20" onclick="window.location.href='{:url('/iGoods')}'">
            <a href="#"    style="height: 50px;">
                <span><img src="__INDEX__/images/fb.png" width="50px" height="36px"/></span>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4" id="wd20" onclick="window.location.href='{:url('/iMessage')}'">
            <a href="#">
                <span><img src="__INDEX__/images/xx@2x.png" width="20px" height="20px"/></span>
                <div class="mui-media-body" style="margin-top:6px;">消息</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4" id="wd20"  onclick="window.location.href='{:url('/iMyself')}'">
            <a href="#">
                <span  ><img src="__INDEX__/images/wd@2x.png" width="20px" height="20px"/></span>
                <div class="mui-media-body" style="margin-top:6px;">我的</div>
            </a>
        </li>
    </ul>
</div>
</body>
<script>
    function joinGo() {
        var price = $("#price").val();

        console.log(price)

        if (price == '') {
            alert('价格呀')
            return
        }

    }

</script>

<script>

    function chooseHer(id){

        console.log(id)
        var url = "{:url('/selGood')}"
        $.post(url,{
            joinId : id
        },function(res){
            console.log(res)
            alert(res.msg)
            if (res.state == 'success'){
                window.location.href = "{:url('/iMessage')}"
            }
        },'json')
    }

    //倒计时函数
    $(function () {
        updateEndTime();
    });

    function updateEndTime() {
        var date = new Date();
        var time = date.getTime(); //当前时间距1970年1月1日之间的毫秒数
        $(".settime").each(function (i) {
            var endDate = this.getAttribute("endTime"); //结束时间字符串
            var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) {
                return parseInt(a, 10) - 1;
            }).match(/\d+/g) + ')');  //转换为时间日期类型
            var endTime = endDate1.getTime(); //结束时间毫秒数
            var lag = (endTime - time) / 1000; //当前时间和结束时间之间的秒数
            if (lag > 0) {
                var second = Math.floor(lag % 60);
                var minite = Math.floor((lag / 60) % 60);
                var hour = Math.floor((lag / 3600) % 24);
                var day = Math.floor((lag / 3600) / 24);
                $(this).html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
            }
            else {
                $(this).removeClass("settime");
                alert($(this).attr("id"));
                $(this).html("已经结束啦！");
            }
        });
        setTimeout("updateEndTime()", 1000);
    }

</script>

</html>